@import "@/assets/sass/mixin.scss";
@import "@/assets/sass/var.scss";

body {
    color: $default-color;
    font-family: $default-font-family;
    margin: 0;
    padding: 0;
    min-width: 1200px;
}

/*#region 环境标识*/
.milieu-tag {
    position: relative;

    &:before {
        content: "";
        position: absolute;
        color: $default-hint-color;
        top: -12px;
        right: 0;
    }
}

.dev-tag {
    &:before {
        content: "dev";
    }
}

.image-tag {
    &:before {
        content: "image";
    }
}

.test-tag {
    &:before {
        content: "test";
    }
}

/*#endregion*/

/*#region 文字与颜色*/

.tr {
    text-align: right;
}

.tc {
    text-align: center;
}

.tl {
    text-align: left;
}

.tl,
.tr,
.tc {

    //如果文字超出一行居左显示
    .align-content {
        display: inline-block;
        text-align: left;
    }
}

.fz_15 {
    font-size: 15px;
}

.fz_16 {
    font-size: 16px;
}

.bg-warning {
    background-color: $warning-background-color;
}

.bg-normal {
    background-color: $normal-background-color;
}

.bg-white {
    background-color: $white-background-color
}

.c-warning {
    color: $warning-color;
}

.c-green {
    color: $normal-background-color;
}

.c-hint {
    color: $default-hint-color;
}

.pointer {
    cursor: pointer
}

/*#endregion*/

/*#region 默认容器*/
.h_100 {
    height: 100%;
}

//视图容器
.container-el,
.container-grid {
    background-color: $container-background-color;
    padding: 16px;
}

.container-grid {
    //苹果浏览器不支持盒模型嵌套百分比高度
    @extend .b1;

    //列表
    .grid {
        padding-top: 10px;
    }
}

.container-info {
    .grid {
        height: 40vh;
    }
}

.container-panel {
    @extend .b1;
    width: 100%;
    overflow: hidden;

    //左侧树面板
    .tree-panel {
        background-color: $container-background-color;
        margin-right: 16px;
        align-content: start;
        width: 400px;
        position: relative;

        .tree-panel-container-header {
            color: $default-color;
            font-size: $default-secondary-font-size;
            border-bottom: 1px solid $bg-main-background-color;
            padding: 0 16px;
            height: 64px;
        }

        .tree-panel-container {
            position: absolute;
            width: calc(100% - 30px);
            height: calc(100% - 114px);
            top: 64px;
            padding: 15px;

            .el-tree {
                height: 100%;
                overflow: auto;

                .el-tree-node-label {
                    font-size: $default-font-size;
                }
            }
        }

        //树形数据被选中时
        .is-current {

            &>.el-tree-node__content {
                color: $navigation-active-font-color;
                background-color: $navigation-popup-hover-background-color;
            }
        }

    }

    //右侧容器面板
    .panel-el {
        @extend .bv;
        align-content: start;
        background-color: $container-background-color;
        padding: 16px;
        width: calc(100% - 432px);
    }

    //列表
    .grid {
        padding-top: 10px;
    }
}

//弹窗
.el-dialog__wrapper {

    &.dialog {
        .el-dialog {
            width: 40%;
            min-width: 650px;
            max-width: 1200px;
        }
    }

    &.grid-dialog {
        .el-dialog__body {
            @extend .bv;
            height: 55vh;

            .grid-container {
                overflow: hidden;
            }
        }
    }
}

// 表单
.form-layer,
.form-layer-top {
    margin: 0;

    .el-form-item {
        margin: 11px 0 11px 20px;
    }

    //表单元素宽
    .el-form-item__content {

        //下拉选择组件
        .el-select,
        //日期
        .el-date-editor,
        //下拉树
        .el-tree-select,
        //数字组件
        .el-input-number,
        .el-cascader {
            width: 100%;
        }
    }
}

.form-layer {
    .el-form-item__content {
        height: 100%;
    }
}

// 表单-文字显示在顶部
.form-layer-top {

    .el-form-item__label {
        padding: 0;
        line-height: 2;
    }

    .bg-left-el,
    .left-el {
        .el-form-item__label {
            text-align: right;
            float: left;
            line-height: 40px;
            padding: 0 12px 0 0;
        }
    }

    .left-el {
        @extend .bh;
        align-items: flex-end;

        .el-form-item__content {
            height: 40px;
        }
    }
}

.form-bwrap {
    .el-form-item {
        width: calc(50% - 20px);
    }
}

.form-panel-bwrap {

    .el-form-item {
        width: 300px;
    }
}

// 多行布局表单
.form-bwrap,
.form-panel-bwrap {
    @extend .bh,
    .bwrap;
    //因为子组件整体偏移
    //这里偏移处理避免表单不居中
    margin: -10px 0 0 -20px;

    .el-form-item__content {
        @extend .bh,
        .bstart;
    }

    .el-form-item {
        margin: 11px 0 11px 20px;
    }

    // 自定义宽度铺满组件
    .bg-item {
        width: calc(100% - 20px);

        .el-form-item__content {
            width: auto;
        }
    }

    .item-pleft-10 {
        .el-form-item__content {
            padding-left: 10px;
        }
    }

    // 自定义宽度铺满组件
    .smbg-item {
        width: calc(50% - 20px);

        .el-form-item__content {
            width: auto;
        }
    }

    //表单内部title
    .form-model-title {
        width: 100%;
        font-size: 13px;
        font-weight: bold;
    }

    //大标题
    .big-title {
        background-color: gainsboro;
    }

    .el-divider {
        margin: 20px 0 20px 20px;
    }
}

/*#endregion*/

/*#region 背景图片*/
.bg-contain {
    @include bg(contain);
}

.bg-auto {
    @include bg(auto);
}

.bg-cover {
    @include bg(cover);
}

.bg-left {
    @include bg(contain, left center);
}

.bg-100 {
    @include bg(100% 100%);
}

/*#endregion*/

/*#region 圆角*/
.radius {
    @include border-radius(50%);
}

/*#endregion*/

/*#region 布局*/
.mtb_10 {
    margin: 10px 0;
}

.mt_10 {
    margin-top: 10px;
}

.mt_5 {
    margin-top: 5px;
}

.mb_10 {
    margin-bottom: 10px;
}

.ml_20 {
    margin-left: 20px;
}

.pt_10 {
    padding-top: 10px
}

.ptb_10 {
    padding: 10px 0;
}

.overflow {
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scroll-y {
    overflow-y: auto;
}

/*#endregion*/

/*#region 盒模型*/
/*主轴方向：左到右（默认） | 右到左 | 上到下 | 下到上*/
// flex-direction: row | row-reverse | column | column-reverse;

/*换行：不换行（默认） | 换行 | 换行并第一行在下方*/
// flex-wrap: nowrap | wrap | wrap-reverse;

/*主轴方向和换行简写*/
// flex-flow: <flex-direction> || <flex-wrap>;

/*主轴对齐方式：左对齐（默认） | 右对齐 | 居中对齐 | 两端对齐 | 平均分布*/
// justify-content: flex-start | flex-end | center | space-between | space-around;

/*交叉轴对齐方式：顶部对齐（默认） | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/
// align-items: flex-start | flex-end | center | baseline | stretch;

/*多主轴对齐：顶部对齐（默认） | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 上下平均分布*/
// align-content: flex-start | flex-end | center | space-between | space-around | stretch;

.bh {
    @include box-display(row);
}

.bv {
    @include box-display(column);
}

//b1到b17
@for $i from 1 through 17 {
    .b#{$i} {
        @include box-flex($i);
    }
}

.bc {
    @include box-align(center, center);
}

.bend {
    @include box-align(center, flex-end);
}


.bstart {
    @include box-align(center, flex-start);
}

.bbetween {
    @include box-align(center, space-between);
}

.baround {
    @include box-align(center, space-around);
}

.bwrap {
    display: flex;
    flex-wrap: wrap;
}

/*#endregion*/

/*#region 全局样式*/

.title-el {
    @extend .bh,
    .bstart;
    font-size: $default-secondary-font-size;
    color: $default-color;

    &:before {
        background-color: $default-hint-color;
        content: "";
        width: 4px;
        height: 14px;
        margin-right: 6px;
    }
}

.container-el {
    .el-form {
        .el-form-item.last-row {
            margin: 11px 0 0 20px;
        }

        .el-textarea {
            &:not(.is-disabled) {
                margin-bottom: 20px;
            }
        }

        //表单错误校验样式
        .el-textarea~.el-form-item__error {
            bottom: 0;
            top: auto;
        }

    }

    .toobar {
        padding: 16px 0 0 0;
    }
}

.scroll-el {
    margin-bottom: 56px;

    .toobar {
        @include box-shadow(0px 5px 10px 5px rgba(195, 193, 193, 0.5));
        background-color: $container-background-color;
        position: absolute;
        bottom: 0;
        left: 0;
        width: calc(100% - 64px);
        margin: 0 25px;
        z-index: 10;
        padding: 10px 0;
    }
}

//列表行处理
.vxe-grid {

    //状态
    .status-el {
        .vxe-cell {
            &:after {
                @extend .radius;
                content: '';
                display: inline-block;
                margin: 0 0 1px 9px;
                width: 8px;
                height: 8px;
            }
        }
    }

    //警告
    .warning-el {
        // @extend .c-warning;

        .status-el {
            .vxe-cell {
                &:after {
                    @extend .bg-warning;
                }
            }
        }
    }

    //正常
    .normal-el {
        .status-el {
            .vxe-cell {
                &:after {
                    @extend .bg-normal;
                }
            }
        }
    }

    //警告
    .warning-line {
        @extend .c-warning;
    }

    //正常
    .green-line {
        @extend .c-green;
    }

    //提示
    .hint-line {
        @extend .c-hint;
    }
}

//列表
.grid {
    .vxe-table {

        // vxe 表头样式
        .vxe-header--row {

            // 可拖拽列新增手势
            // 过滤掉勾选列，序号列，浮动列
            // 如有修改需同步修改@/utils/tableColumn.ts下listenColumnDrop方法中filter配置
            .vxe-header--column:not(.col--checkbox):not(.col--seq):not(.col--fixed) {
                cursor: move;
            }
        }
    }
}

//树形表格
.tree-grid {
    .vxe-table.has--tree-line {
        .vxe-body--row {
            .vxe-body--column {
                // 右侧边线
                @include gradient-right-line(mix(#000, $table-header-background-color, 5%));
                border-bottom: 0;
            }
        }
    }
}

/*#endregion*/

/*#region 渐变背景色*/
// 覆盖[跟随记录]模块tabs样式
.follow-tabs.el-tabs.el-tabs--top {
    .el-tabs__header.is-top {
        display: none;
    }
}

// 渐变背景色
.bob-item- {
    $bgList: (1:(#16e3bf 0%, #17ade6 100%),
            2:(#00e2c4 0%, #2132f4 100%),
            3:(#0172f4 0%, #8c21f9 100%),
            4:(#ffad01 0%, #f22b20 100%),
            5:(#e23c22 0%, #9e1c7c 100%));

    @each $key,
    $val in $bgList {
        &bg-#{$key} {
            width: 100%;
            height: 100%;
            position: absolute;
            @include bg-gradient($val);
            border-radius: 50%;
            opacity: 0.5;
        }

        // 内环样式
        &ring-#{$key} {
            width: 80%;
            height: 80%;
            position: absolute;
            border-radius: 50%;
            @include bg-gradient($val);
            box-shadow: 0px 3px 7px 3px rgba(195, 193, 193, 0.5);
        }
    }
}

/*#endregion*/

/*#region 重写默认样式*/

//输入提示
@include placeholder($default-font-size, $default-placeholder-color); //调整禁用时文字颜色

.el-form-item__label {
    color: $default-color;
}

.el-input,
.el-textarea {

    .el-input__inner,
    .el-textarea__inner {
        font-family: $default-font-family;
        color: $default-color;
    }

    //禁用
    &.is-disabled {

        .el-input__inner,
        .el-textarea__inner {
            color: $default-disabled-color;
        }
    }
}

.el-radio {
    &.is-disabled {
        .el-radio__label {
            color: $default-disabled-color !important;
        }
    }
}

.el-textarea {
    .el-textarea__inner {
        padding: 9px 15px 8px 15px;
    }

    //字数统计
    .el-input__count {
        background: transparent;
        bottom: -18px;
        line-height: 1;
        right: 5px;
    }
}

//兼容ie，禁止密码框出现显示密码图标
input::-ms-reveal {
    display: none;
}

//兼容ie，避免无故出现滚动条
textarea {
    overflow: auto;
}

//滑块
.el-switch {
    .el-switch__core {
        @include border-radius(50px);
        border-color: $el-switch-color;
        background-color: $el-switch-color;
        height: 24px;

        &:after {
            width: 20px;
            height: 20px;
            left: 2px;
        }
    }

    &.is-checked {
        .el-switch__core {
            border-color: $el-switch-checked-color;
            background-color: $el-switch-checked-color;

            &:after {
                margin-left: -22px;
            }
        }
    }
}

// .el-checkbox {
//     .el-checkbox__input {
//         vertical-align: bottom;
//     }

//     .el-checkbox__label {
//         padding-left: 6px;
//     }
// }

/*#region 滚动条*/

//滚动条
//不设置高宽上下左右按钮会用默认的图标
::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

//滚动条轨道
::-webkit-scrollbar-track {
    background-color: $scrollbar-track-background-color;
}

//滚动条滑块
::-webkit-scrollbar-thumb {
    background-color: $scrollbar-thumb-background-color;
}

//鼠标移动到滚动条滑块上方滚动条滑块背景色
::-webkit-scrollbar-thumb:hover {
    background-color: $scrollbar-thumb-hover-background-color;
}

// 滚动条上的按钮
::-webkit-scrollbar-button {
    @include bg(60%);
    background-color: $scrollbar-track-background-color;
}

//按钮移动到背景色
::-webkit-scrollbar-button:hover {
    background-color: $scrollbar-thumb-hover-background-color;
}

//向上按钮
::-webkit-scrollbar-button:vertical:decrement {
    background-image: url("~@/assets/images/ico/arrow-up.svg");
}

//向下按钮
::-webkit-scrollbar-button:vertical:increment {
    background-image: url("~@/assets/images/ico/arrow-down.svg");
}

//向左按钮
::-webkit-scrollbar-button:horizontal:decrement {
    background-image: url("~@/assets/images/ico/arrow-left.svg");
}

//向右按钮
::-webkit-scrollbar-button:horizontal:increment {
    background-image: url("~@/assets/images/ico/arrow-right.svg");
}

/*#endregion*/

//交互信息提示框位置
.el-message-box__btns {
    text-align: center;
}

//下拉框弹出层
.el-select-dropdown {
    .el-select-dropdown__item.hover {
        background-color: $el-combo-hover-background-color;
    }
}

// vxe表格头
.toolbar {
    position: relative;

    //列表需要配置显示字段功能，但是不要列表组件本身的表头，这里隐藏vxe表格表头
    .vxe-toolbar {
        position: absolute;
        top: -32px;
        right: 0;

        .vxe-custom--wrapper {
            .vxe-button {
                visibility: hidden;
            }

            //半选
            .vxe-checkbox--indeterminate-icon:after {
                transform: scale(.5);
                left: 0;
                right: 0;
                top: 7px;
                width: auto;
            }

            //全选
            .vxe-checkbox--checked-icon:after {
                transform: rotate(45deg) scaleY(1);
                top: 2px;
                left: 6px;
            }
        }

        .vxe-custom--option-wrapper {
            .vxe-custom--option {

                &.is--indeterminate,
                &.is--checked {
                    color: $default-hint-color;
                }

                .vxe-checkbox--icon:before {
                    border-width: 1px;
                }
            }

            .vxe-custom--body {
                overflow-x: hidden;
                max-height: 22em;

                .vxe-checkbox--icon {
                    left: .6em;
                    top: .67em;
                }

                &>li {
                    padding: 8px 1em 7px 2.3em;
                }
            }

            .vxe-custom--footer {
                @include box-shadow(0px 5px 10px 5px rgba(195, 193, 193, 0.5));
                background-color: $table-site-footer-background-color;
            }
        }
    }
}

// 表格
.vxe-table {

    // vxe 表头样式
    .vxe-header--row {
        .vxe-header--column {
            @include gradient-right-line(mix(#000, $table-header-background-color, 5%));
            background-color: $table-header-background-color;
            padding: 7px 0;

            .vxe-header--column {
                padding: 5px 0;
            }

            .vxe-cell {
                color: $default-color;
                padding: 5px 0;
                font-weight: 400;
            }
        }
    }

    .vxe-cell {
        .el-button {
            padding: 8px;
        }

        .btns {
            .el-button {
                margin: 5px;
            }
        }
    }

    .vxe-body--row {
        .vxe-body--column {
            height: 42px;
        }

        &.row--hover {
            background-color: $table-row-hover-background-color;
        }
    }

    .bg-stripe {
        background-color: $table-row-stripe-background-color;
    }
}

.vxe-table--tooltip-wrapper.vxe-table--valid-error {
    z-index: 99999 !important;
}

//弹窗
.el-dialog__wrapper {
    @extend .bh,
    .bc;

    .el-dialog {
        &:not(.is-fullscreen) {
            @include border-radius($dialog-border-radius);
            overflow-y: hidden;
            margin: 0 !important;

            //中间部分
            .el-dialog__body {
                max-height: 55vh;
            }
        }

        &.is-fullscreen {
            @extend .bv;

            //中间部分
            .el-dialog__body {
                @extend .b1;
                @extend .bv;
            }
        }

        //头部
        .el-dialog__header {
            padding: 16px 16px 10px;

            //标题
            .el-dialog__title {
                font-size: $dialog-title-font-size;
                color: $dialog-title-color;
                font-weight: bold;
            }
        }

        //中间部分
        .el-dialog__body {
            overflow-y: auto;
            padding: 20px 20px 10px 20px;
        }

        //按钮部分
        .el-dialog__footer {
            text-align: center;
            padding: 16px;

            //使按钮居中无误差
            .el-button {
                margin: $dialog-footer-button-margin;
            }
        }
    }
}

//查询头
.search-header {
    background-color: $search-header-background-color;
    padding: 16px;

    .el-button--mini {
        padding: 10px 14px;
        font-size: $default-font-size;

        &.btn-site {
            font-size: $default-secondary-font-size;
            padding: 9px;
        }
    }

    .form-container.el-form {
        margin: 15px 0 5px 0;

        .el-form-item {
            width: auto;
            margin: 0 20px 15px 0;
        }

        .el-form-item__content {
            @extend .bh,
            .bstart;
        }

        .el-date-editor {
            .el-input__inner {
                padding-right: 15px;
            }
        }

        .time-range-class {
            .el-input__inner {
                padding-right: 18px;
            }
        }
    }

    .el-dialog__wrapper {

        .el-dialog__body {
            .after-class {
                font-size: $default-secondary-font-size;
                color: $default-color;
                font-weight: 400;

                &:before {
                    top: 5px;
                    left: -10px;
                    background-color: $default-hint-color;
                }

                &:not(.check-box-margin) {
                    margin-top: 0;
                }
            }

            .el-checkbox {
                align-items: flex-end;

                .el-checkbox__label {
                    color: $default-color;
                }

                & .is-checked {
                    .el-checkbox__inner {
                        background-color: $default-hint-color;
                        border-color: $default-hint-color;
                    }
                }
            }

        }

        //交互取消与确定按钮的位置
        .el-dialog__footer {
            //水平翻转交互位置
            @include rotateY(180deg);

            //把按钮文字翻转回来
            .el-button {
                @include rotateY(180deg);
            }
        }
    }
}

.el-message-box {
    .el-message-box__title {
        font-size: $dialog-title-font-size;
        color: $dialog-title-color;
    }
}

/*#endregion*/

/*#region 按钮*/
.el-button {
    padding: 10px 12px;
    color: $default-color;
}

//查询 btn-blue
@include button($ui: "blue",
    $background-color: $button-blue-background-color);
//重写默认primary样式同btn-blue
@include button($ui: "el-button--primary", $default:true,
    $background-color: $button-blue-background-color);

//确定 btn-confirm
@include button($ui: "confirm",
    $background-color: $button-confirm-background-color);

//设置按钮 btn-site
@include button($ui: "site",
    $background-color: transparent,
    $background-color-disabled: transparent,
    $color-disabled: $default-placeholder-color,
    $color:$button-site-color);

//清空按钮 btn-clear 
@include button($ui: "clear",
    $background-color: transparent,
    $border-width:1px,
    $color:$button-clear-color, $border-color:$button-clear-border-color);

//无背景按钮 btn-text
@include button($ui: "text",
    $background-color: transparent);

//折叠按钮 btn-contractility
@include button($ui: "contractility",
    $background-color: $button-contractility-background-color,
    $padding:0);

/*#endregion*/